{% extends 'app/base.html' %}
{% load staticfiles %}

{% block cssinclude %}
    <style>
        .help-block {
            color: orangered;
        }
    </style>
{% endblock %}


{% block mainbody %}
    <div class=" portlet-custom  portlet light">
        <div class="portlet-title tabbable-line">
            <div class="caption caption-md">
                <span class="portlet-subject"><i class="portlet-subject-dot">&nbsp;</i>账号登录</span>
            </div>

        </div>
        <div class="portlet-body">
            <form action="javascript:;" class="form-horizontal" id="form">

                <div class="form-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label">用户名 <span class="required">*</span></label>
                        <div class="col-md-4">
                            <input id="user_name" name="user_name" type="text" class="form-control input-circle"
                                   placeholder="输入用户名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">密码 <span class="required">*</span></label>
                        <div class="col-md-4">
                            <input id="pwd" name="pwd" type="password" class="form-control input-circle"
                                   placeholder="输入密码"/>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">图片验证码 <span class="required">*</span></label>
                        <div class="col-md-8" style="width:180px;display:inline-block;vertical-align: middle">
                            <input type="text" id="verifyCode" name="verifyCode" class="form-control"
                                   placeholder="请输入图片验证码"/>
                        </div>
                        <img id="imgCaptcha"
                             style="background-image:url('/captcha');width:140px;height:38px;vertical-align: middle;">
                    </div>
                </div>
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <button type="button" id="submit" class="btn btn-circle blue">提交</button>
                            <button type="button" id="cancel" class="btn btn-circle default" onclick="window.location.href='register'">注册</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}


{% block jsinclude %}
    <script type="text/javascript"
            src="{% static 'assets/global/plugins/jquery-validation/js/jquery.validate.min.js' %}"></script>
    <script type="text/javascript"
            src="{% static 'assets/global/plugins/jquery-validation/js/additional-methods.min.js' %}"></script>
    <script type="text/javascript"
            src="{% static 'assets/global/plugins/jquery-validation/js/localization/messages_zh.min.js' %}"></script>
    <script>
        $(document).ready(function () {
            $("#imgCaptcha").click(handleCaptcha);
            handleValidation();
        });
        handleCaptcha = function () {
            $("#imgCaptcha").css('background-image', 'url(/captcha?' + Math.random() + ")");
        }
        $('#submit').click(function () {
            if (handleValidation().form()) {
                var user_name = $('#user_name').val();
                var pwd = $('#pwd').val();
                var verifycode = $('#verifyCode').val();

                ajax({
                    url: 'login',
                    data: {
                        user_name: user_name,
                        pwd: pwd,
                        verifycode: verifycode
                    },
                    success: function (data) {
                       window.location = data.url;
                    }
                });
            }
        });

        function handleValidation() {
            var form1 = $('#form');
            var error1 = $('.alert-danger', form1);
            var success1 = $('.alert-success', form1);

            validator = form1.validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block help-block-error', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",  // validate all fields including form hidden input
                messages: {
                    select_multi: {
                        required: "该字段为必填项",
                        number: "请输入有效的数字",
                        maxlength: jQuery.validator.format("Max {0} items allowed for selection"),
                        minlength: jQuery.validator.format("At least {0} items must be selected")
                    }
                },
                rules: {
                    user_name: {
                        minlength: 1,
                        maxlength: 12,
                        required: true
                    },
                    pwd: {
                        minlength: 6,
                        maxlength: 16,
                        required: true
                    },
                    repeat_pwd: {
                        minlength: 6,
                        maxlength: 16,
                        required: true
                    },
                    verifyCode: {
                        required: true,
                        minlength: 4,
                        maxlength: 4
                    }
                }
            });
            return validator;
        };
        {#csrf标签，防止ajax，post被拦截#}
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });
    </script>
{% endblock %}